<template>
  <div>
    <div class="top-bar">
      <div>VIP会员</div>
      <div>-&nbsp;您的的会员服务中心&nbsp;-</div>
      <van-icon name="search" size="20px" @click="goSearch" />
    </div>
    <div class="content">
      <div class="open-card">
        <div class="card-left">
          <div class="card-img">
            <img src="@/assets/img/VIP.png" alt="vip" style="width:100%;heigth:100%;"/>
          </div>
          <p>立即开通会员</p>
        </div>
        <div class="card-right">开通VIP</div>
      </div>

      <h4 class="title">专属会员推荐</h4>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="item in memberVideoList" :key="item.id" >
          <div class="img-box" @click="goDetail(item.id)">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              :src="item.image"
            />
          </div>
          <p @click="goDetail(item.id)">{{ item.name }}</p>
        </swiper-slide>
      </swiper>

      <h4 class="title">VIP权益专区</h4>
      <div class="v-own">
        <div class="own-top">
          <img src="@/assets/img/vip-banner.jpg" alt="logo" style="width:100%;heigth:100%;"/>
        </div>
        <ul class="own-bot">
          <li>
            <div>
              <img src="@/assets/img/videos.png" alt="logo" style="width:100%;heigth:100%;"/>
            </div>
            <p>视频特权</p>
          </li>
          <li>
            <div>
              <img src="@/assets/img/message.png" alt="logo" style="width:100%;heigth:100%;"/>
            </div>
            <p>广告特权</p>
          </li>
          <li>
            <div>
              <img src="@/assets/img/score.png" alt="logo" style="width:100%;heigth:100%;"/>
            </div>
            <p>积分特权</p>
          </li>
          <li>
            <div>
              <img src="@/assets/img/down.png" alt="logo" style="width:100%;heigth:100%;"/>
            </div>
            <p>下载特权</p>
          </li>
        </ul>
      </div>
    </div>

    <tab-bar active="member" />
  </div>
</template>

<script>
import memberApi from "@/api/member/member";
import TabBar from "@/components/tabbar";
export default {
  name: "Member",
  components: {
    TabBar,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 10,
        freeMode: true,
      },
      memberVideoList: [],
    };
  },
  created() {
    this.getMemberVideoList();
  },
  methods: {
    async getMemberVideoList() {
      let res = await memberApi.getMemberVideo();
      if (res.code === 20000) {
        this.memberVideoList = res.data.data;
      } else {
        this.$toast(res.msg);
      }
    },
    goSearch() {
      this.$router.push("/search");
    },
    goDetail(id) {
      this.$router.push({
        path:'/details',
        query:{id}
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d8ad6e;
  background: #322b3b;
}
.content {
  margin-top: 66px;
  margin-bottom: 100px;
}
.open-card {
  width: 6.9rem;
  height: 80px;
  background: #b2b9c5;
  margin: 10px auto;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .card-left {
    display: flex;
    color: #fff;
    align-items: center;
    .card-img {
      width: 50px;
      height: 50px;
      background: #322b3b;
      border-radius: 50%;
      margin: 0 10px;
    }
  }
  .card-right {
    width: 70px;
    line-height: 36px;
    background: #fed19e;
    margin-right: 10px;
    border-radius: 5px;
    text-align: center;
    color: #666;
  }
}
.title {
  padding: 10px 16px;
  font-weight: 800;
}
.swiper {
  width: 100%;
  height: 200px;
  .swiper-slide:nth-of-type(1) {
    margin-left: 16px;
  }
  .swiper-slide {
    .img-box {
      width: 100%;
      height: 170px;
      border-radius: 5px;
      background: red;
      overflow: hidden;
    }
    p {
      line-height: 30px;
    }
  }
}
.v-own {
  width: 6.9rem;
  height: 240px;
  margin: 0 auto;
  .own-top {
    width: 100%;
    border-radius: 5px 5px 0 0;
  }
  .own-bot {
    width: 100%;
    height: 50%;
    border-radius: 0 0 5px 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #f2f5fa;
    li {
      width: 25%;
      height: 100%;
      div {
        width: 50px;
        height: 50px;
        background: yellow;
        margin: 25px auto 5px;
        border-radius: 50%;
      }
      p {
        width: 100%;
        line-height: 30px;
        text-align: center;
        color: #666;
      }
    }
  }
}
</style>